<!-- 供应商对账看板 -->

<script setup>

import {onMounted, ref} from "vue";
import screenApi from "../../api/screen.js";
import dayjs from 'dayjs';
import CommonBox2 from "../../components/CommonBox2.vue";

//出库列表加载中设置
const listLoading = ref(false);

//出库统计加载中设置
const statisticsLoading = ref(false);

const formData = reactive({
  'queryDate': new Date(),
  'page': 1,
  'rows': 20
});

const pagination = reactive({
  currentPage: 1,
  rows: 20,
  pages: 1,
  total: 0
});

function handleCurrentChange(currentPage){
  // 重新获取数据
  outList();
}

function handleSizeChange(pageSize){
  // 重新获取数据
  outList();
}


const tableData = ref([]);

function tableRowClassName(rowIndex) {
  if (rowIndex.rowIndex % 2 !== 0) {
    return 'evenRow';
  }
  return 'oddRow';
}

const dataTotal = ref(
    {
      legend: {
        orient: 'vertical',
        right: 20,
        top: '30%',
        textStyle: {
          color: 'white'
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        //自定义提示框内容，通过 dataIndex 关联额外信息
        formatter: function (params) {
          // 拼接提示内容（包含主数据和额外信息）
          return `
        <div>
          <p>日期：${params[0].name}</p>
          <p>出库量： ${params[0].data}</p>
          <p>出库金额： ${(params[1].data / 10000).toFixed(2)}万元</p>
        </div>
      `;

        },
        showContent: true
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          formatter: function (value) {
            return value;
          },
          rotate: 45
        }
      },
      yAxis: {gridIndex: 0, height: 600},
      series: [
        {
          name: '出库量',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'top',
            color: "rgba(254, 254, 254, 1)",
          }
        },
        {
          name: '出库金额',
          type: 'bar',
          data: [],
          label: {
            show: true,
            position: 'top',
            color: "rgba(254, 254, 254, 1)",
            formatter: function (params) {
              return (params.data / 10000).toFixed(2) + '万元';
            }
          }
        }
      ]
    });


function outboundChat() {
  const requestData = {...formData};
  requestData.queryDate = dayjs(requestData.queryDate).format('YYYY-MM');
  statisticsLoading.value = true;
  screenApi.outboundChat(requestData).then(res => {
    if (res.statusCode === 200) {
      dataTotal.value.series[0].data = res.data.dataMateChat;
      dataTotal.value.series[1].data = res.data.dataAmountChat;
      dataTotal.value.xAxis.data = res.data.dataDate;
    } else {
      alert("获取出库统计数据失败：" + res.message);
    }
    statisticsLoading.value = false;
  }).catch(e => {
    alert('获取出库统计数据异常');
    statisticsLoading.value = false;
  });
}

function outList() {
  const requestData = {...formData};
  requestData.queryDate = dayjs(requestData.queryDate).format('YYYY-MM');
  requestData.page = pagination.currentPage;
  requestData.rows = pagination.rows;
  listLoading.value = true;
  screenApi.outList(requestData).then(res => {
    if (res.statusCode === 200) {
      tableData.value = res.data.rows;
      pagination.pages = res.data.pages;
      pagination.total = res.data.total;
    } else {
      alert("获取出库数据失败：" + res.message);
    }
    listLoading.value = false;
  }).catch(e => {
    alert('获取出库数据异常');
    listLoading.value = false;
  });
}


function query() {
  //出库列表
  outList();
  //数据
  outboundChat();
}


onMounted(async () => {
  //出库列表
  outList();
  //数据
  outboundChat();
});


</script>

<template>

  <div class="head">
    <h1>自购出库统计图</h1>
  </div>

  <div>
    统计日期：
    <el-date-picker type="month" v-model="formData.queryDate"></el-date-picker>
    <button @click="query">查询</button>
  </div>

  <div class="board-row" v-loading="listLoading" element-loading-text="加载中...">
    <div class='moduleTable'>
      <!-- //设置表格头的样式和字体 -->
      <el-table :data="tableData" style="width: 100%;margin:0 auto; padding: 17px 0;
                --el-table-border-color: none;
                --el-table-bg-color: none;
                --el-table-row-hover-bg-color:#c4c4b2;
                --el-table-tr-bg-color: none"
                :row-class-name='tableRowClassName'
                :cell-style="{'color':'red','text-align':'center'}"
                :header-cell-style="{'background':'#375A88','color':'rgba(253,211,2,0.8)','text-align':'center'}">
        <el-table-column prop="department" label="领用部门" class="name-content"/>
        <el-table-column prop="recipient" label="领用人"/>
        <el-table-column prop="custodian" label="保管员"/>
        <el-table-column prop="bgdate" label="领用日期"/>
        <el-table-column prop="mateStockNo" label="领用单号"/>
        <el-table-column prop="mateCode" label="物项代码"/>
        <el-table-column prop="mateName" label="物项名称"/>
        <el-table-column prop="specs" label="规格"/>
        <el-table-column prop="receiveNum" label="领用数量"/>
        <el-table-column prop="countUnit" label="单位"/>
        <el-table-column prop="outBoundAmount" label="出库金额"/>
      </el-table>

      <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size ="pagination.rows"
          :size="small"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />

    </div>
  </div>

  <div class="board-row" v-loading="statisticsLoading" element-loading-text="加载中...">
    <common-box2>
      <div class="chart-header">
        自购出库日度趋势
      </div>
      <div style="height: 30em;width: 100%;">
        <v-chart :option="dataTotal"></v-chart>
      </div>
    </common-box2>
  </div>
</template>

<style scoped lang="scss">

.layout-container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  north: {
    flex: 1;
  }
  south: {
    flex: 1;
  }
}


.board-row {
  display: flex;
  gap: 1em;
  padding: 1em;
}

.board-row > div {
  flex: 1;
}

.vitas-data {
  border-radius: 50%;
  border: 3px solid #49bcf7;
  display: block;
  width: 6em;
  height: 6em;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.vitas-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ffffff;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6em;
  height: 6em;
  overflow: hidden;
}

.chart-header {
  text-align: left;
  font-size: 0.5em;
  padding: 0.2em 0 0.2em 1em;
}

.selectOption {
  .el-input__wrapper {
    background-color: rgba(15, 112, 169, 0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }

  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }

  .el-input__suffix {
    padding-right: 15px;
  }

  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }

  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 0 !important;
  }
}
</style>